<template>
  <div v-move class="box">
    <div class="header">header</div>
    <div>内容</div>
  </div>
  <div v-bd>?</div>
</template>

<script setup lang="ts">
import { Directive } from 'vue'
const vMove: Directive = {
  mounted(el: HTMLElement) {
    let moveEl = el.firstElementChild as HTMLElement
    console.log(el.childNodes)
    const mouseDown = (e: MouseEvent) => {
      //鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
      console.log(e.clientX, e.clientY, '-----起始', el.offsetLeft)
      let X = e.clientX - el.offsetLeft
      let Y = e.clientY - el.offsetTop

      const move = (e: MouseEvent) => {
        el.style.left = e.clientX - X + 'px'
        el.style.top = e.clientY - Y + 'px'

        console.log(e.clientX, e.pageX, e.clientY, '---改变')
      }
      // document.addEventListener('mousemove', move)
      document.onmousemove = move
      document.addEventListener('mouseup', () => {
        // document.removeEventListener('mousemove', move)
        document.onmousemove = null
      })
    }
    moveEl.addEventListener('mousedown', mouseDown)
    // el.addEventListener('mousedown', mouseDown)
  }
}
const vBd: Directive = {
  mounted(el: HTMLElement) {
    el.style.border = '1px solid red'
  }
}
</script>

<style lang="less">
.box {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  .header {
    height: 20px;
    background: black;
    color: #fff;
    cursor: move;
  }
}
</style>
